<!--<div class="head" th:if="${user != null }">-->
<!--<img th:src="@{${user.headimgurl}}"/>-->
<!--<p>[[${user.nickname}]]</p>-->
<!--</div>-->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" charset="UTF-8" />
		<title>话费抽奖</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			a {
				text-decoration: none
			}
			
			body {
				background-color: #EE9611;
				position: relative;
			}
			
			.main {
				position: relative;
				height: 100vh;
				width: 100%;
			}
			
			.lottery_bg {
				position: absolute;
				height: 100%;
			}
			
			.lottery_tba {
				position: absolute;
				width: 80%;
				margin: 0 10%;
				top: 30%
			}
			
			.lottery_btn {
				position: absolute;
				width: 30%;
				margin: 0 35%;
				top: 40%
			}
			
			.tanchuang {
				width: 100%;
				height: 100%;
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, .5);
				z-index: 9999;
			}
			
			.model {
				width: 80%;
				height: 246px;
				margin: 50% 10%;
				border-radius: 10px;
				background: -moz-linear-gradient(left, rgba(255, 47, 88, 1), rgba(243, 102, 74, 1));
				background: -ms-linear-gradient(left, rgba(255, 47, 88, 1), rgba(243, 102, 74, 1));
				background: -o-linear-gradient(left, rgba(255, 47, 88, 1), rgba(243, 102, 74, 1));
				background: -webkit-linear-gradient(left, rgba(255, 47, 88, 1), rgba(243, 102, 74, 1));
			}
			
			.model>#title {
				text-align: center;
				color: #ffedc9;
				font-weight: 400;
				line-height: 70px;
				font-size: 20px;
				letter-spacing: 2px;
			}
			
			.model>.message {
				width: 85%;
				height: 100px;
				border: 4px solid #f74a44;
				border-radius: 10px;
				margin: 0 7%;
				background-color: #ffedc9;
			}
			
			.message>.leftMessage {
				width: 40%;
				float: left;
				line-height: 100px;
				color: #f23737;
				text-align: center;
			}
			
			.leftMessage>b {
				font-size: 50px;
			}
			
			.message>.rightMessage {
				width: 59%;
				float: left;
				color: #f23737;
			}
			
			.rightMessage>p {
				font-size: 16px;
				margin-top: 35px;
			}
			
			.rightMessage>span {
				font-size: 12px;
				-webkit-transform: scale(0.8, 0.8);
				-moz-transform: scale(0.8, 0.8);
				-o-transform: scale(0.8, 0.8);
				transform: scale(0.8, 0.8);
				display: block;
				margin-left: -16px;
			}
			
			#money,
			#remark,
			#notice {
				font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "华文细黑", "STHeiti", "MingLiu";
			}
			
			.model>button {
				width: 87%;
				height: 35px;
				border: 4px solid #fece36;
				border-radius: 5px;
				margin: 10px 7%;
				background-color: #fece36;
				color: #e25f2e;
			}
		</style>
	</head>

	<body class="main">
		<img src="/static/images/background.png" class="lottery_bg" />
		<img src="/static/images/turntable.png" class="lottery_tba" />
		<img id="tupBtn" src="/static/images/button.png" class="lottery_btn" />

		<div class="tanchuang" id="bulletFrame">
			<div class="model">
				<h2 id="title">恭喜您获得！</h2>
				<div class="message">
					<div class="leftMessage">
						￥<b id="money">4</b>
					</div>
					<div class="rightMessage">
						<p id="remark">话费券</p>
						<span id="notice">充值满100元及以上可使用</span>
					</div>
				</div>
				<button>去使用</button>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="/static/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="/static/js/jQueryRotate.js"></script>
	<script type="text/javascript" src="/static/js/cookie_util.js"></script>
	<script type="text/javascript" src="/static/js/axios.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			//旋转角度
			var angles;
			//可抽奖次数
			var clickNum = 1;
			//旋转次数
			var rotNum = 1;
			//重复点击
			var isDisable = true;
			//弹框选择 (1: 谢谢参与     2: 抽得话费券)
			var showModel = 1;
			var info = ["谢谢参与", "4元券", "3元券", "1元券"];

			$("#tupBtn").click(function() {
				if(isDisable) {

					if(clickNum > 0) {

						axios({
							// 默认请求方式为get
							method: 'get',
							url: '/v1/prize/getTelCharge',
							// 传递参数
							params: {},
							// 设置请求头信息
							headers: {
								"wechat-token": getCookie("wechat-token")
							},
							responseType: 'json'
						}).then(response => {
							// 请求成功
							console.log(response);
							let res = response.data;
							if(res.code == 1000) {
								// 中奖id
								var id = res.data;
								//可抽奖次数减一
								clickNum = clickNum - 1;
								//转盘旋转
								runCup(id);
								//转盘旋转过程“开始抽奖”按钮无法点击
								isDisable = false;
								//旋转次数加一
								rotNum = rotNum + 1;
								//“开始抽奖”按钮无法点击恢复点击
								setTimeout(function() {
									if(showModel == 2) {
										$("#bulletFrame").show();
									} else {
										alert("谢谢参与")
									}

									isDisable = true;
								}, 6000);

							} else {
								alert(res.message);
							}

						}).catch(error => {
							// 请求失败，
							console.log(error);
						});

					} else {
						alert("亲，抽奖次数已用光！");
					}

				}
			})
			//转盘旋转
			function runCup(res) {
				probability(res);
				$(".lottery_tba").rotate({
					animateTo: angles,
					duration: 6000
				})
			}
			//各奖项对应的旋转角度及中奖公告内容
			function probability(res) {
				//获取随机数
				var num = res;
				console.log(num)
				if(num == 1) {
					angles = 2160 * rotNum + 1800;
					notice = info[0];
				}
				//概率	49/101
				else if(num == 4) {
					showModel = 2;
					$("#money").html(4);
					angles = 2160 * rotNum + 2100;
					notice = info[1];
				}
				//概率	2/101
				else if(num == 3) {
					showModel = 2;
					$("#money").html(3);
					angles = 2160 * rotNum + 2040;
					notice = info[2];
				}
				//概率	1/101
				else if(num == 2) {
					showModel = 2;
					$("#money").html(1);
					angles = 2160 * rotNum + 1980;
					notice = info[3];
				}

			}

		});
	</script>

</html>